<template>
  <a-card class="case_produce" :bordered="false">
    <a-spin tip="加载中..." :spinning="spinning">
      <div style="margin-bottom: 15px">
        <span class="add_form_label">{{ labelTitle }}</span>
        <span style="padding-left: 10px" v-if="currentSonstatus != null && currentSonstatus != undefined">
          <a-tag color="#52c41a" style="padding: 0px 5px">
            {{ Tp_proctypeEnum[currentSonstatus] ? Tp_proctypeEnum[currentSonstatus].sonStatus.name : null }}
          </a-tag>
        </span>
        <!-- <a-button v-if="btnLabel" @click="activeBtnClick" type="primary" class="add_form_btn" v-show="operateBtnShow">
          {{ btnLabel }}
        </a-button> -->
        <a-button
          v-if="btnLabel && operateBtnShow"
          @click="startBusinessProcedClick"
          type="primary"
          class="add_form_btn btn_primary_color"
          :loading="processLoading"
        >
          {{ btnLabel }}
        </a-button>
        <!-- 当前是编辑模式 -->
        <a-button class="add_form_btn btn_normal_color" @click="addCustomerMaterial"> 新增自定义材料 </a-button>
        <a-divider />
      </div>
      <div style="height: 50px" v-if="busiKey != selfExecuteKey">
        <a-col :span="4"> <span class="tip_label">是否市领导审批：</span></a-col>
        <a-col :span="18">
          <a-radio-group
            name="radioGroup"
            v-model="isCitymanager"
            @change="citymanagerChange"
            :disabled="!operateBtnShow"
          >
            <a-radio :value="3200"> 是 </a-radio>
            <a-radio :value="3201"> 否 </a-radio>
          </a-radio-group>
        </a-col>
      </div>
      <a-list class="file_list" item-layout="horizontal" :data-source="fileItem">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta style="margin-top: 10px">
            <span slot="title">
              <div v-if="!item.isCustomer">
                <span v-if="item.required" style="color: red; padding-right: 5px; text-align: center">*</span>
                <span v-else style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">{{ item.fileName }}</span>
                  <a
                    style="color: #0072c6; margin-left: 10px"
                    class="upload_btn btn_normal_color"
                    v-show="uploadBtnShow"
                    @click="showUploadModal(item, false)"
                  >
                    <a-icon type="upload" />&nbsp;上传</a
                  >
                </div>
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon :style="{ color: '#0072c6' }" type="link" style="font-size: 14px" />
                    <a
                      style="color: #0072c6"
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 70px; color: #000"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="editFile(fileItem)">编辑</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div v-else-if="item.isSaved && !item.isUpdated">
                <span style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">
                    {{ item.fileName }}
                    <!-- <a style="margin-left:40px" type="link" @click="editCustomerMaterial(item)">编辑</a> -->
                    <a
                      style="color: #0072c6; margin-left: 10px"
                      class="upload_btn btn_normal_color"
                      v-show="uploadBtnShow && item.isSaved"
                      @click="showUploadModal(item, true)"
                    >
                      <a-icon type="upload" />&nbsp;上传</a
                    >
                    <a-divider type="vertical" />
                    <span style="color: #0072c6">
                      <a-icon
                        v-show="uploadBtnShow"
                        class="customer_icon"
                        @click="editCustomerMaterial(item)"
                        type="edit"
                      />&nbsp;编辑</span
                    >
                    <a-popconfirm
                      title="确认删除自定义材料项吗？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="deleteCustomer(item)"
                      class="left_icon"
                    >
                      <a-divider type="vertical" />
                      <span style="color: #0072c6"
                        ><a-icon v-show="uploadBtnShow" class="customer_icon" type="delete" />&nbsp;删除</span
                      >
                    </a-popconfirm>
                  </span>
                </div>
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon :style="{ color: '#0072c6' }" type="link" style="font-size: 14px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span style="color: #0072c6" v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 70px; color: #000"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div class="customer_div" v-else-if="!item.isSaved || item.isUpdated">
                <span class="customer_span"> {{ !item.isSaved ? '新增:' : '修改:' }}</span>
                <a-input
                  class="customer_input"
                  ref="userNameInput"
                  v-model="item.fileName"
                  placeholder="请输入自定义材料名称"
                  :max-length="50"
                >
                  <!-- <a-icon slot="prefix" type="file-add" /> -->
                  <a-tooltip slot="suffix" title="材料名称长度上限50">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input>
                <div class="customer_icon_group" v-show="uploadBtnShow">
                  <a-popconfirm
                    title="确认撤销吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="rollBackCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" type="close" />
                  </a-popconfirm>
                  <a-popconfirm
                    title="确认保存吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="saveCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" style="margin-left: 20px" type="check" />
                  </a-popconfirm>
                </div>
              </div>
            </span>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-spin>

    <MultiUploadProduce
      ref="multiUploadProduce"
      :applyid="applyid"
      :busiType="busiType"
      :currentUser="currentUser"
      @afterUpload="queryMaterialsList"
    ></MultiUploadProduce>
    <MaterialVersion ref="materialVersionRef"></MaterialVersion>
    <!-- <component
      ref="component"
      :is="component"
      :applyid="applyid"
      :busiType="busiType"
      :fileItem="fileItem"
      :processinstanceid="processinstanceid"
      @reload="reloadComponent"
      @gotoSonRouter="autoToSonRouter"
    />

    <component
      ref="updateComponent"
      :is="updateComponent"
      :applyid="applyid"
      :busiType="busiType"
      :materialOption="selectedOption"
      @reload="reloadComponent"
    /> -->
  </a-card>
</template>
<script>
import { ProcedureMinxin } from '../ProcedureMinxin'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype'
import { execute_category } from '@/utils/handlecase/tab_list.js'
import { Tp_categoryValue } from '@/enumeration/Tp_category.js'
import { getTabByCategory } from '@/enumeration/Tp_category'
const selfExecuteKey = Tp_proctypeEnum.execute_self.value // 停止执行
export default {
  mixins: [ProcedureMinxin],
  props: {
    applyid: {
      type: String,
      required: true
    },
    busiKey: {
      type: Number,
      required: true
    },
    category: {
      type: String
    },
    btnLabel: {
      type: String,
      required: false,
      default: () => {
        return '答复'
      }
    },
    isEditModel: {
      type: Boolean,
      default: false,
      required: true
    },
    processinstanceid: {
      type: String,
      required: false
    },
    sonStatus: {
      type: Array,
      required: false
    },
    decisiontype: {
      type: Number,
      required: false
    },
    reason: {
      type: String,
      required: false
    },
    admreview: {
      // 主数据状态
      type: Object,
      required: true
    }
  },
  data () {
    return {
      selfExecuteKey: selfExecuteKey
    }
  },
  async created () {
    console.log('busikey' + this.busiKey)
    this.initParam()
    // const res = await viewApl_admre_audit(this.$route.params.applyid)
    // if (res.code == 0) {
    //   debugger
    //   if (res.data.type == Tp_proctypeValue.EXECUTE_FORCE_LAW) {
    //     this.typeEnum = this.Tp_proctypeEnum['execute_force_law']
    //     console.log('当前类型', this.typeEnum)
    //     this.labelTitle = this.typeEnum.name
    //     this.busiType = this.typeEnum.value
    //     debugger
    //     this.busiName = this.typeEnum.key
    //     this.showCitymanager = this.typeEnum.showCitymanager
    //   }
    // }
    if (this.sonStatus != undefined && this.sonStatus != null) {
      this.currentSonstatus = this.sonStatus.filter(item => item == this.busiName)[0]
    } else {
      this.currentSonstatus = undefined
    }
  },
  components: {},
  methods: {
    setButtonDisabled () {
      if (this.isEditModel) {
        // 是否是从编辑模式进入
        const tabCategory = getTabByCategory(this.category, this.busiKey)
        if (tabCategory == 'editAll') {
          this.operateBtnShow = true // 操作按钮展示
          this.uploadBtnShow = true // 上传按钮展示
        } else if (tabCategory == 'disabled') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        } else if (tabCategory == 'editOnlySelf') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        }
      } else {
        this.operateBtnShow = false
        this.uploadBtnShow = false
      }
      // debugger
      // FIXME: 临时放开
      this.uploadBtnShow = true
    },
    /**
     * 修改被申请人
     * @param {} e
     */
    citymanagerChange (e) {
      this.resetMaterialType()
    }

    // setButtonDisabled () {
    //   // 是否是从编辑模式进入
    //   // 当前是不是该四个状态
    //   if (!execute_category.includes(this.category)) {
    //     this.uploadBtnShow = true // 上传按钮展示
    //     this.operateBtnShow = true
    //   } else {
    //     this.uploadBtnShow = true // 上传按钮展示
    //     this.operateBtnShow = false
    //     // isforce 是否强制执行
    //     // isurging 是否履行催告
    //     // isperform 是否责令履行
    //     // ispunish  是否政务处分
    //     // 获取流程的子状态：
    //     let perform = false
    //     let punish = false
    //     let urge = false
    //     let force = false
    //     if (this.sonStatus && this.sonStatus.includes(Tp_proctypeEnum.execute_perform.key)) {
    //       perform = false
    //     } else {
    //       perform = !this.admreview.isperform
    //     }
    //     // 判断当前是否是政务处分
    //     if (perform || (this.sonStatus && this.sonStatus.includes(Tp_proctypeEnum.execute_punish.key))) {
    //       punish = false
    //     } else {
    //       punish = !this.admreview.ispunish
    //     }
    //     // 当前的状态是履行催告
    //     if (this.sonStatus && this.sonStatus.includes(Tp_proctypeEnum.execute_reminder.key)) {
    //       urge = false
    //     } else {
    //       urge = !this.admreview.isurging
    //     }
    //     // 判断当前是否是强制执行
    //     if (urge || (this.sonStatus && this.sonStatus.includes(Tp_proctypeEnum.execute_force.key))) {
    //       force = false
    //     } else {
    //       force = !this.admreview.isforce
    //     }
    //     if (perform && this.category == Tp_categoryValue.perform_upload) {
    //       this.operateBtnShow = true
    //     }
    //     if (punish && this.category == Tp_categoryValue.punish_upload) {
    //       this.operateBtnShow = true
    //     }
    //     if (urge && this.category == Tp_categoryValue.reminder_upload) {
    //       this.operateBtnShow = true
    //     }
    //     if (force && this.category == Tp_categoryValue.force_upload) {
    //       this.operateBtnShow = true
    //     }
    //     // 判断是否是在启用的子流程，若是则需要隐藏提交按钮
    //     if (this.sonStatus && this.sonStatus.includes(this.busiName)) {
    //       this.operateBtnShow = false
    //     }
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/apply/caseProcedure.scss';
.transparent-input {
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 移除边框 */
  border-bottom: 1px solid rgb(251, 251, 252); /* 可选：添加底部边框以提升可视度 */
  outline: none; /* 移除默认的输入框外观 */
  color: rgb(119, 166, 253); /* 设置文本颜色 */
  /* 可以根据需要添加更多样式 */
}
</style>
